<template>
  <van-overlay :show="showMaskLayer">
    <div class="loading-box">
      <van-loading type="spinner" vertical>{{ $t("loading") }}</van-loading>
    </div>
  </van-overlay>
</template>

<script>
import { Overlay, Loading } from 'vant';
import { mapState } from 'vuex';
export default {
    name: 'mask-layer',
    components: {
        [Overlay.name]: Overlay,
        [Loading.name]: Loading
    },
    computed: {
        ...mapState(['showMaskLayer'])
    }
};
</script>

<style scoped lang="less">
.loading-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
